<template>
  <div class="main-content">
    <SideBar />
    <div class="right-side">
      <router-view v-slot="{ Component }">
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed} from 'vue';
import { useRouter } from 'vue-router';
import SideBar from '@/components/SideBar.vue'
// 定义需要缓存的组件名列表
const router = useRouter();
// 使用计算属性自动响应路由变化
const cachedViews = computed(() => {
  const extractNames = (routes): string[] => {
    return routes.flatMap(route => [
      ...(route.meta?.keepAlive && route.name ? [route.name] : []),
      ...(route.children ? extractNames(route.children) : [])
    ]);
  };
  // 执行提取并去重
  return Array.from(new Set(extractNames(router.options.routes)));
});

</script>

<style scoped>
.main-content {
  height: calc(100vh - var(--title-bar-height));
  display: flex;
  overflow-y: auto;
  background-color: #f5f5f5;
  flex: 1;
}

.right-side {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
}
</style>